<template>
  <div>
    <div class="scroll" :style="{border:'dashed 1px #ddd',padding:`${layout.视图边距}px`,height:`${winHeight-232}px`}">
      <a-row :gutter="layout.左右间距">
        <a-col :offset="c.offset" :span="c.span" v-for="(c,i) in columns" :key="`column${i}`">
          <div :class="layout.标签对齐==='top'?'':'flx-s'" :style="{marginBottom:`${layout.上下间距}px`}">
            <div :class="layout.标签对齐==='right'?'tar':'tal'" class="mr10" :style="{width:`${layout.标签宽度}px`}">
              {{ c.name }}
            </div>
            <div class="flx-1" :class="layout.标签对齐==='top'?'mt10':''">
              <div v-if="c.isCal" class="info fs12">【计算属性】</div>
              <div v-else>
                <ZgInput disabled></ZgInput>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      layout: {
        标签对齐: 'right',
        标签宽度: 100,
        左右间距: 10,
        上下间距: 10,
        视图边距: 10
      },
      columns: [
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },

        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },

        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} },
        { offset: 0, span: 12, name: '字段1', type: '单行文本', isCal: false, extra: {} }
      ]
    }
  }
}
</script>

<style scoped>

</style>
